<template>

	<view class="container">
 
		<!-- #ifdef APP-VUE -->
		
		
		<view class=""
			style="height: 44px;position: fixed;left: 0;right: 0;top: 0rpx;background-color: #EEE;z-index: 100;">
			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
				:show="isSearch">
				<uni-forms v-if="isSearch&&currentIndex==1">
					<uni-forms-item style="line-height: 88rpx;height: 88rpx;">
						<view class=""
							style="display: flex;align-items: center;justify-content: space-between;padding: 0 38rpx;">
							<uni-easyinput v-model="ordinaryParams.mc" type="search" style="display: inline-block;"
								placeholder="请输入搜索内容"></uni-easyinput>
							<text style="display: inline-block;width: 100rpx; text-align: center;"
								@click="Search">搜索</text>
						</view>
					</uni-forms-item>
				</uni-forms>
			</uni-transition>
			<!-- <button class="transition-button" type="primary" @click="handle(['fade', 'slide-right'])">由右至左过</button> -->



			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles" :show="show">
				<view class="tabs" v-show="!isSearch">
					<view class="tabs-item" v-for="(item,index) in legend" @tap="changeHandle(index)">
						<text :style="{color: currentIndex === index?item.color:''}">{{item.text}}</text>
					</view>

					<view class="tabs-bottom-line" :style="{left:80 + (currentIndex*160 -6) + 'rpx',
				backgroundColor:legend[currentIndex].color}"></view>


				</view>
			</uni-transition>
		</view>
		<!-- #endif -->
		<view class="content" style="padding: 80rpx 0 200rpx;position: relative;">
			<view class="box-group" v-if="currentIndex==0">
				<view class="box-item" v-for="(item,index) in goodsQueryData"
					:style="{boxShadow: `10rpx 0 1rpx ${legend[currentIndex].color} inset`,border:`1px solid ${legend[currentIndex].color}` }">
					<uni-swipe-action class="action-item">

						<uni-swipe-action-item class="action-item" :disabled="!(currentIndex==0)"
							:right-options="options" @click="onClick" @change="change">
							<view class="list" style="position: relative;">
								<view class="left">
									<!-- <image style="width: 100rpx; height: 100rpx; " mode="widthFix"
										src="../../static/icons/sy.png"></image> -->
									<!-- <img :src="getImg('sy.png')" alt="图片" srcset="" style="width: 50px;"/> -->
									<view class="text">
										<text style="font-size: 28rpx;display: block;">{{item.mc}}</text>
										<text style="font-size: 20rpx;display: block;">物资类型：{{item.lx}}</text>
										<text style="font-size: 20rpx;display: block;">规格：{{item.gg}}</text>
										<text style="font-size: 20rpx;display: block;">剩余数量：{{item.sysl}}</text>
										<text style="font-size: 20rpx;display: block;">单位：{{item.dw}}</text>

									</view>
								</view>
								<view class="right">
									<view class="text">
										<uni-number-box v-if="item.sysl" v-model="item.sqsl" value="0" :max="item.sysl"
											@change="changeValue" />

									</view>


								</view>
								
							</view>

						</uni-swipe-action-item>

					</uni-swipe-action>
				</view>
			</view>
			<view class="box-group" v-if="currentIndex==1" >
				<view class=""
					style="height: 88rpx;display: flex;align-items: center;justify-content: space-between;padding: 0 70rpx;font-size: 28rpx;background-color: #FFF;z-index: 10; position: fixed;top: 84rpx;left: 0;right: 0;">
					<view class="">
						批次名称
					</view>
					<view class="">
						申请时间
					</view>
					<view class="">
						状态
					</view>
				</view>
				<view class="" style="padding-top: 44rpx;">

					<uni-collapse accordion>
						<uni-collapse-item  v-for="(item,index) in recordingData">
							<template v-slot:title>
								<view class=""
									style="display: flex;align-items: center;justify-content: space-between;height: 88rpx;">
									<view class="" style="font-size: 26rpx;margin-left: 30rpx;">
										{{item.mc}}
									</view>
									<view class="" style="font-size: 26rpx;">
										{{item.sj}}
									</view>
									<view class="" style="font-size: 26rpx;">
										{{item.zt}}
									</view>
								</view>

							</template>
							<view class="" style="margin: 0 30rpx;">
								<view class="title"
									style="background-color: #EEE;display: flex;align-items: center;justify-content:space-around;margin-bottom: 16rpx;">
									<text>药品名称</text>
									<text>申请数量</text>
								</view>
								<view class="cont" v-for="(item,index) in item.xq"
									style="background-color: #FFF;display: flex;align-items: center;justify-content:space-around;margin-bottom: 16rpx;">
									<text>{{item.wzname}}</text>
									<text>{{item.sl}}</text>
								</view>
							</view>
						</uni-collapse-item>

					</uni-collapse>

				</view>
			</view>
			<uni-load-more :status="status" @clickLoadMore="clickLoadMore" :contentText="contentText" />
		</view>
		<view class="fixed-bottom" v-if="currentIndex<1">
			<button @click="Claim">申领</button>
		</view>


	</view>
</template>

<script>
	import {
		toast,
		signOut,
		getStorageSync,
		useRouter
	} from '../../utils/utils.js'
	import {
		getGoodsList,
		getGoods,
		recording,
		Claim,
		Records,
		groupClaim
	} from '../../api/goods.js'
	export default {

		data() {
			// 病情判断，体征录入，入出量记录，生命体征，物资信息列表，入出量，药房捡药，物资消耗，检验，物资查看，医嘱执行，后送执行，日常护理记录，结果录入，检查，输血记录，伤员接收，伤员护理记录，套餐医嘱，扫一扫，扫码结果
			return {
				goodsQueryData: [],
				recordingData: [],
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				styles: {},
				show: true,
				modeClass: 'fade',
				searchValue: null,
				isSearch: false,
				currentIndex: 1,
				legend: [{
						color: '#F18180',
						text: '普通物资'
					},
					{
						color: '#84cc16',
						text: '申请记录'
					}
				],
				ordinaryParams: {
					pageNum: 1,
					pageSize: 10,
					mc: null
				},
				recordingParams: {
					pageNum: 1,
					pageSize: 20
				},
				claimQuery: []
			}
		},
		onLoad(option) {
			this.goodsOrdinary()
			this.recordings()
		},
		onReachBottom() {
			this.status = 'loading'
			if(this.currentIndex){
				// 申请记录
				this.recordingParams.pageNum++
				this.recordings()
			}else{
				// 普通物资
				this.ordinaryParams.pageNum++
				this.goodsOrdinary()
				
			}
			
			
		},
		methods: {
			// 搜索
			Search() {
				this.goodsQueryData = []
				this.goodsOrdinary()
			},
			// 申领
			Claim() {
				// 普通物资申请参数
				this.goodsQueryData.forEach((item, index) => {
					if (item.sqsl) {
						var ql = {
							ckfs: '医保组',
							zsl: item.sqsl,
							wzId: item.id
						}
						this.claimQuery.push(ql)
						item.sqsl = null
					}
				})
				console.log(this.claimQuery);
				groupClaim(this.claimQuery).then(res => {
					if (res.code === 200) {
						toast("申领成功")
						this.recordings()
						this.claimQuery=[]
						this.goodsOrdinary()
					}
				})
			},
			// 查询申请记录
			recordings() {
				console.log(this.recordingParams);
				Records(this.recordingParams).then(res => {
					console.log(res);
					if (!res.rows.length) {
						this.status = 'no-more'
					} else {
						this.status = 'more'
					}
					if (this.recordingData.length) {
						this.recordingData.push(...res.rows)
					} else {
						this.recordingData = res.rows
					}
				})
			},
			// 普通物资
			goodsOrdinary() {
				getGoods(this.ordinaryParams).then(res => {
					if (!res.rows.length) {
						this.status = 'no-more'
					} else {
						this.status = 'more'
					}
					if (this.goodsQueryData.length) {
						this.goodsQueryData.push(...res.rows)
					} else {
						res.rows.forEach((item, index) => {
							this.goodsQueryData.push({
								...item,
								sqsl: null
							})
						})
					}
				})
			},
			xz(e) {
				console.log(e);
			},
			onChange(e) {
				this.status = e.detail.value
			},
			clickLoadMore(e) {
				this.status = 'loading'
				if(this.currentIndex){
					// 申请记录
					this.recordingParams.pageNum++
					this.recordings()
				}else{
					// 普通物资
					this.ordinaryParams.pageNum++
					this.goodsOrdinary()
					
				}
			},
			back() {
				useRouter('/pages/index/index', {}, 'switchTab')

			},
			changeHandle(index) {
				this.currentIndex = index
				console.log(index);
			},
			openDetail() {
				uni.navigateTo({
					url: '/pages/doctorsAdvice/detail'
				})
			},
			handle(type) {
				this.show = !this.show
				this.modeClass = type
				this.isSearch = !this.isSearch
			},
			onClick() {
				console.log('1');
			},
			change() {
				console.log(2);
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #efefef;
		position: relative;

	}

	.fixed-bottom {
		height: 110rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		padding: 36rpx;

		button {
			background-color: #3f6212;
			border-radius: 50rpx;
			color: #FFFFFF;
		}
	}

	::v-deep.uni-navbar__content_view {
		font-size: 28rpx;
	}

	::v-deep.uni-navbar-btn-text>uni-text {
		font-size: 28rpx !important;
		font-weight: 500;
	}

	::v-deep.uni-navbar__header-container {
		display: flex;
		flex: 1;
		padding: 0 10px;
		overflow: hidden;
		align-items: center;
		justify-content: center;
	}

	.input-view {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #efefef;
		border-radius: 50rpx;
		height: 54rpx;

		.input-uni-icon {
			display: inline-block;
			text-indent: 20rpx;
		}

		.nav-bar-input {
			// display: inline-block;
			// padding: 10rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			height: 24rpx;
		}
	}

	.container {
		.legend {
			width: 100%;
			height: 100rpx;
			background-color: #FFFFFF;
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 30rpx;
			box-sizing: border-box;
			position: fixed;
			z-index: 100;

			.legend-item {
				text {
					font-size: 18rpx;
					margin-bottom: 8rpx;
				}

				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				text-align: center;
			}
		}

		.tabs {
			box-shadow: inset 0rpx 44rpx 102rpx #efefef;
			height: 88rpx;
			// padding-top: 100rpx !important;
			line-height: 88rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			position: relative;

			.tabs-item {
				display: inline-block;
				margin-left: 38rpx;

				&:first-child {
					margin-left: 0;

				}

			}

			.tabs-bottom-line {
				width: 40rpx;
				height: 4rpx;
				background-color: #8EBC8B;
				position: absolute;
				bottom: 0;
				left: 40rpx;
				transition: all ease-in-out .3s;
				border-radius: 2rpx;
				right: 0;

			}
		}

		.box-group {

			padding: 30rpx;
			box-sizing: border-box;
			
			.box-item {

				border: 1px solid #8EBC8B;
				background-color: #FFFFFF;
				width: 100%;
				// height: 100rpx;
				// padding: 20rpx 0;
				border-radius: 4rpx;
				box-shadow: 10rpx 0 1rpx #8EBC8B inset; //#DAA521 #F18180 #BA56D4
				margin-bottom: 10rpx;

				.action-item {
					// 	height: 102rpx;
					// 	line-height: 1.7;
					// 	background-color: #fefefe;
					// 	box-shadow:inset 0rpx 44rpx 102rpx #efefef;


					.list {
						padding: 0 24rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							display: flex;
							align-items: center;

							.text {
								line-height: 1.5;
								font-size: 16rpx;
								padding: 18rpx 0;
							}
						}

						.right {
							font-size: 18rpx;
							line-height: 1.5;
						}
					}
				}
			}
		}

	}
</style>